<template>
  <s-layout
            :bgStyle="{ color: '#151515',src: '/uploads/20240504/62a53a5e0b5477d78dfe457b9fdca2f3.png'}"
            :navbarStyle="template.style?.navbar"
            class="page-brand">
    <view class="goods-top">
      <view class="ss-flex">
        <image src="@/static/img/home-icon-9.png" mode=""></image>
        <view class="goods-top-t">
          <view class="goods-top-t1">九丝城宇宙官方</view>
          <view class="ss-flex">
            <image src="@/static/img/goods-icon-2.png" mode=""></image>
            <view class="goods-top-t2">官方认证</view>
          </view>
        </view>
      </view>
      <view class="goods-top-m">
        九丝城宇宙基于元宇宙场景提出的解决方案，致力于为用户提供卓越的虚拟及数字化体验。作为连接现实与虚拟之间的桥...
      </view>
      <view class="goods-top-b">
        人脉扩列
      </view>
    </view>
    <view class="goods-title">品牌孵化</view>
    <view v-if="!state.iconStatus && state.pagination.total > 0" class="ss-flex ss-flex-wrap ss-m-t-20 ss-col-top">
      <view class="goods-list-box">
        <pro-two />
      </view>
    </view>
    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
        contentdown: '上拉加载更多',
      }" @tap="loadmore" />
    <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
    </s-empty>
  </s-layout>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import proTwo from '@/pages/components/pro-two.vue';
  import sheep from '@/sheep';
  import _ from 'lodash';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  const template = computed(() => sheep.$store('app').template?.home);

  const sys_navBar = sheep.$platform.navbar;
  const emits = defineEmits(['close', 'change']);

  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  };

  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    currentSort: 'weigh',
    currentOrder: 'desc',
    currentTab: 0,
    filterParams: {},
    curFilter: 0,
    showFilter: false,
    iconStatus: false,
    categoryId: 0,
    tabList: [{
      name: '综合推荐',
      value: 'weigh',
      list: [{
        label: '综合推荐',
        sort: 'weigh',
        order: 'desc',
      },
        {
          label: '价格升序',
          sort: 'price',
          order: 'asc',
        },
        {
          label: '价格降序',
          sort: 'price',
          order: 'desc',
        },
      ],
    },
      {
        name: '销量',
        value: 'total_sales',
      },
      {
        name: '新品优先',
        value: 'createtime',
      },
    ],
    loadStatus: '',
    keyword: '',
    leftGoodsList: [],
    rightGoodsList: [],
  });

  // 加载瀑布流
  let count = 0;
  let leftHeight = 0;
  let rightHeight = 0;

  function mountMasonry(height = 0, where = 'left') {
    if (where === 'left') {
      leftHeight += height;
    } else {
      rightHeight += height;
    }

    if (!state.pagination.data[count]) return;

    if (leftHeight <= rightHeight) {
      state.leftGoodsList.push(state.pagination.data[count]);
    } else {
      state.rightGoodsList.push(state.pagination.data[count]);
    }
    count++;
  }

  function emptyList() {
    state.pagination = pagination;
    state.leftGoodsList = [];
    state.rightGoodsList = [];
    count = 0;
    leftHeight = 0;
    rightHeight = 0;
  }

  //搜索
  function onSearch(e) {
    state.keyword = e;
    emptyList();
    getList(state.currentSort, state.currentOrder, state.categoryId, e);
  }

  // 点击
  function onTabsChange(e) {
    if (state.tabList[e.index].list) {
      state.currentTab = e.index;
      state.showFilter = !state.showFilter;
      return;
    } else {
      state.showFilter = false;
    }
    if (e.index === state.currentTab) {
      return;
    } else {
      state.currentTab = e.index;
    }
    emptyList();

    getList(e.value, state.currentOrder, state.categoryId, state.keyword);
  }

  // 点击筛选项
  const onFilterItem = (val) => {
    if (
      state.currentSort === state.tabList[0].list[val].sort &&
      state.currentOrder === state.tabList[0].list[val].order
    ) {
      state.showFilter = false;
      return;
    }
    state.curFilter = val;
    state.tabList[0].name = state.tabList[0].list[val].label;
    state.currentSort = state.tabList[0].list[val].sort;
    state.currentOrder = state.tabList[0].list[val].order;
    emptyList();
    getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
    state.showFilter = false;
  };

  async function getList(Sort, Order, categoryId, keyword, page = 1, list_rows = 6) {
    state.loadStatus = 'loading';
    const res = await sheep.$api.goods.list({
      sort: Sort,
      order: Order,
      category_id: !keyword ? categoryId : '',
      list_rows,
      keyword: keyword,
      page,
    });
    if (res.code === 1) {
      let couponList = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: couponList,
      };
      mountMasonry();
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }

  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getList(
        state.currentSort,
        state.currentOrder,
        state.categoryId,
        state.keyword,
        state.pagination.current_page + 1,
      );
    }
  }

  onLoad((options) => {
    state.categoryId = options.categoryId;
    state.keyword = options.keyword;
    getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
  });
  // 上拉加载更多
  onReachBottom(() => {
    loadmore();
  });
</script>

<style lang="scss" scoped>
  .page-brand {
    background-image: url("@/static/bandBg.png");
    background-repeat: no-repeat;
  }

  .goods-top {
    margin: 40rpx;

    image {
      width: 136rpx;
      height: 136rpx;
      border-radius: 100%;
      margin-right: 28rpx;
    }

    .goods-top-t {
      .goods-top-t1 {

        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
        margin-bottom: 20rpx;
      }

      .goods-top-t2 {

        font-weight: 400;
        font-size: 18rpx;
        color: #FFFFFF;
      }

      image {
        width: 34rpx;
        height: 38rpx;
        margin-right: 6rpx;
      }
    }

    .goods-top-m {

      font-weight: 300;
      font-size: 24rpx;
      color: #FFFFFF;
      line-height: 160%;
      margin: 60rpx 0;
    }

    .goods-top-b {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      margin-bottom: 50rpx;
      text-align: center;
      border: 2px solid #45C9F0;
      border-radius: 45rpx;

      font-weight: 300;
      font-size: 32rpx;
      color: #45C9F0;
    }
  }

  .goods-title {
    margin: 30rpx;

    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
  }

  .goods-list-box {
    .goods-list-box-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
</style>
